<template>
	<el-form size="small" inline>
		<el-form-item>
			<el-input v-model="queryData.userName" clearable placeholder="用户姓名" style="width: 120px"></el-input>
		</el-form-item>
		<el-form-item>
			<el-input v-model="queryData.account" clearable placeholder="用户账号" style="width: 120px"></el-input>
		</el-form-item>
		<el-form-item>
			<el-select v-model="queryData.type" clearable placeholder="用户类型" style="width: 114px">
				<el-option v-for="(item, index) in dictData['TB_SYS_USER_TYPE']" :key="index" :label="item.deName" :value="item.deValue" />
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-select v-model="queryData.sex" clearable placeholder="用户性别" style="width: 102px">
				<el-option v-for="(item, index) in dictData['TB_SYS_USER_SEX']" :key="index" :label="item.deName" :value="item.deValue" />
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-select v-model="queryData.del" clearable placeholder="用户状态" style="width: 102px">
				<el-option label="可用" value="1"></el-option>
				<el-option label="禁用" value="2"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" icon="el-icon-search" @click="handleSearchData()">查询</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
	props: {
		value: { type: Object, default: () => {} }
	},
	data() {
		return {
			queryData: this.value
		};
	},
	watch: {
		value: {
			handler(data) {
				this.queryData = data;
			},
			deep: true
		},
		queryData: {
			handler(data) {
				this.$emit('input', data);
			},
			deep: true
		}
	},
	methods: {
		handleSearchData() {
			this.$emit('search');
		}
	}
};
</script>

<style scoped></style>
